import React, { Component } from 'react';
import styled from 'styled-components'
import ss from '../images/search.png'
import axios from '../util/axios'
import { InfiniteScroll } from 'antd-mobile'
import format from '../util/format';

//样式
const IndexDiv = styled.div`
box-sizing: border-box;
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
display: flex;
flex-direction: column;
padding-bottom:45px;
        .head{
            height: 40px;
            width: 100%;
            background-color: #dd3635;
            display: flex;
            box-sizing: border-box;
            padding-left: 10px;
            padding-right: 10px;
        }

        .nav{
            flex: 1;
            overflow-x: auto;
        }
        .nav::-webkit-scrollbar{
            display:none;
        }
        .nav>ul{
            display: flex;
            height: 40px;
            align-items: center;
            flex-wrap: nowrap;
        }

        .nav>ul>li{
            margin-right: 20px;
            flex-shrink: 0;
        }

        .nav>ul>li.cur a{
            font-size: 19px;
            font-weight: 600;
        }
        .nav>ul>li>a{
            color: #ffffff;
            font-size: 16px; 
        }

        .search{
            width: 40px;
            height: 40px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }

        .s_btn{
            display: inline-block;
            width: 30px;
            height: 30px;
            background: url(${ss}) no-repeat;
            background-size: contain;
        }





        .content{
            flex: 1;
            overflow-y: auto;
            box-sizing: border-box;
            padding-left: 10px;
            padding-right: 10px;
        }


        .content>ul>li{
            display: flex;
            height: 100px;
            border-bottom: 1px solid #f3f3f3;
            box-sizing: border-box;
            padding-top: 14px;
            padding-bottom: 14px;
        }
        .content>ul>li:last-child{
            border-bottom: 0;
        }

        .info{
            flex: 1;
            display: inline-flex;
            flex-direction: column;
            justify-content: space-between;
            margin-right: 10px;
        }


        .title{
            font-size: 18px;
            color: #222222;
            overflow:hidden;
            display:-webkit-box;
            text-overflow:ellipsis;
            -webkit-line-clamp:2; 
            -webkit-box-orient:vertical; 
            white-space:normal;
        }

        .something{
            color: #a5a5a5;
            font-size: 12px;
        }


        .img{
            width: 115px;
            height: 72px;
            overflow: hidden;
        }

        .img>img{
            width: 100%;
        }
        

`

class Index extends Component {
    state = {
        nav: ['军事', '财经', 'NBA', '汽车', '文化', '股票', '时政'],
        idx: 0,
        list: [],
        hasMore: true,
        page: 1
    }
    componentDidMount() {
        /* axios.post('/news',
            {
                type: this.state.nav[this.state.idx]
            }
        ).then(res => {
            this.setState({
                list: res.data
            })
        }) */
    }
    //切换分类处理函数
    changesort = (num) => {
        this.setState({
            idx: num,
            page: 1,
            list: []
        }, function () {
            //点击分类列表时重新调用loadMore方法
            this.loadMore()

            // axios.post('/news',
            //     {
            //         type: this.state.nav[this.state.idx],
            //     }
            // ).then(res => {
            //     console.log(res)
            //     this.setState({
            //         list: res.data
            //     })
            // })
        })
    }
    //处理下拉刷新函数
    loadMore = async () => {

        //执行的时候先把加载更多改成false, 就当做没有下一页
        this.setState({
            hasMore: false
        })

        // 使用同步方式请求数据
        const res = await axios.post('/news', {
            type: this.state.nav[this.state.idx],
            page: this.state.page
        })

        this.setState({
            list: [...this.state.list, ...res.data],
        })
        //判断是否有下一页，有就将page加一
        if (res.data.length > 0) {
            this.setState({
                page: ++this.state.page,
                hasMore: true
            })
        }

    }
    //点击跳转搜索页面
    gosearch = () => {
        this.props.history.push('/search')
    }
    render() {

        return (
            <IndexDiv>

                <div className="head">
                    <div className="nav">
                        <ul>
                            {
                                this.state.nav.map((item, index) => {
                                    return <li onClick={() => {
                                        this.changesort(index)
                                    }} className={this.state.idx === index ? 'cur' : ''} key={index}><a>{item}</a></li>
                                })
                            }

                        </ul>
                    </div>
                    <div className="search">
                        <span className="s_btn" onClick={this.gosearch}></span>
                    </div>
                </div>
                <div className="content">
                    <ul>
                        {
                            this.state.list.map((item, index) => {
                                if (item.type === '财经') {
                                    return (
                                        <li key={index}>
                                            <div className="info" onClick={() => {
                                                this.props.history.push('/newsinfo/' + item._id)
                                            }}>
                                                <div className="title">{item.title}</div>
                                                <div className="something">
                                                    <span className="m_r10">{item.media}-{item.type}</span>
                                                    <span>{format.toYMD(item.pubtime)}</span>
                                                </div>
                                            </div>
                                            {item.img && item.img !== 'none' ? <div className="img">
                                                <img src={item.img} />
                                            </div> : ''}

                                        </li>
                                    )
                                } else {
                                    return (
                                        <li key={index}>
                                            <div className="info" onClick={() => {
                                                this.props.history.push('/newsinfo/' + item._id)
                                            }}>
                                                <div className="title">{item.title}</div>
                                                <div className="something">
                                                    <span className="m_r10">{item.source}-{item.type}</span>
                                                    <span>{format.toYMD(item.time)}</span>
                                                </div>
                                            </div>
                                            {item.img && item.img !== 'none' ? <div className="img">
                                                <img src={item.img} />
                                            </div> : ''}
                                        </li>
                                    )
                                }

                            })
                        }

                    </ul>
                    <InfiniteScroll threshold={10} loadMore={this.loadMore} hasMore={this.state.hasMore} />
                </div>


            </IndexDiv>
        );
    }
}

export default Index;
